<template>
    <div class="account-management-wrapper">
        <div class="login-tel">
            <input :class="{ active: oldUserPwdActive }"
            type="text" v-model="oldUserPwd" placeholder="请输入旧密码" pattern="[0-9]*">
        </div>
        <div class='login-tel'>
            <input :class="{ active: newAgainUserPwdActive }"
            type="text" v-model='newUserPwd' placeholder="请输入新的密码">
        </div>
        <div class='login-tel'>
            <input :class="{ active: newAgainUserPwdActive }"
            type="text" v-model='newAgainUserPwd' placeholder="请再次输入新的密码">
        </div>
        <div class="login-btn">
                <button @click="submitBtn">确认</button>
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import tools from 'utils/tools.js';
import { UpdateUserPwdModel } from 'models/account.js';
import { mapState,mapMutations } from 'vuex';

export default {
    name: 'AccountManagementWrapper',
    data() {
        return {
            oldUserPwd: '',
            newUserPwd: '',
            newAgainUserPwd: '',
            oldUserPwdActive: false,
            newAgainUserPwdActive:false,
             // 验证规则
            rules: {
                //密码验证
                userPwd: {
                    rule: /^\w{6,12}$/,
                    msg: '密码不能为空，且要6,12位'
                }
            }
        } 
    },
    computed:{
      ...mapState(['userInfo'])  
    },
    watch: {
        oldUserPwd() {
            if (this.userInfo.pwd !== this.oldUserPwd) {
                this.oldUserPwdActive = true;
            } else {
                this.oldUserPwdActive = false;
            }
        },
        newAgainUserPwd() {
            if (this.newUserPwd !== this.newAgainUserPwd) {
                this.newAgainUserPwdActive = true;
            } else {
                this.newAgainUserPwdActive = false;
            }
        }

    },
    methods: {
        ...mapMutations(['updatePwd']),
        submitBtn() {
            if (this.userInfo.pwd !== this.oldUserPwd || this.newUserPwd !== this.newAgainUserPwd) {
                Toast('请检查输入是否正确');
                return;
            }
            if (!tools.validate('userPwd', this.newUserPwd)) return;

            const updateUserPwdModel = new UpdateUserPwdModel();
            updateUserPwdModel.updateUserPwd(this.newUserPwd, this.userInfo.id).then((res) => {
                if (res && res.status === 0) {
                    this.updatePwd(this.newUserPwd);
                    this.$router.go(-1);
                } 
                    Toast(res.data.msg);
                
            })


        }
    }
};
</script>

<style lang="scss" scoped>
@import '~styles/mixins.scss';
@import '~styles/variables.scss';
.account-management-wrapper{
   @include flex-column;
    width: 100%;
    font-size: .16rem;
    box-sizing: border-box;
    
    .login-tel {
        height: .66rem;
        width: 100%;
        padding: .1rem .15rem;
	    box-sizing: border-box;
        

        input {
            width: 100%;
			height: 100%;
			border: 1px solid #91a1fb;
			border-radius: .03rem;
			box-sizing: border-box;
			text-indent: .1rem;
        }

        .active{
            border: 1px solid red;
        }
    }

    .login-btn{
        height: .66rem;
        width: 100%;
        padding: .1rem .15rem;
	    box-sizing: border-box;
	    

        button {
            width: 100%;
			height: 100%;
            text-align: center;
            color:$defaultColor;
            background-color: #91a1fb;
            border: 1px solid #91a1fb;
			border-radius: .03rem;
			box-sizing: border-box;
        }
	}
}
</style>
